<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<style type="text/css">
			h4{
				color: white; 
				float: left; 
				line-height: 34px;
			}
			h5{
				color: white; 
				float: right; 
				line-height: 34px;
			}
			.mui-icon{
				font-size: 17px;
			}
			.mui-table-view-cell{
				left: 20px;
				width: 95%;
			}
			.mui-search .mui-placeholder {
				font-size: 13px;
			}
			.mui-search .mui-placeholder .mui-icon{
				font-size: 15px;
			}
			.mui-search .mui-placeholder {
				line-height: 28px;
			}
			.mui-title{
				text-align: left;
			}
		</style>
	</head>

	<body>
		<script src="../js/mui.js"></script>
		<script type="text/javascript">
			mui.init();
		</script>
		<header class="mui-bar mui-bar-nav " style="background-color: #EC971F;" >
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
			<h4 class="mui-title" style="color: white;">选择收货地址</h4>
			<h5 id="addLoc">新增地址</h5>
		</header>
		<!-- CONTENT -->
		<div class="mui-content">
			
					<!--这里放置真实显示的DOM内容-->
					<ul class="mui-table-view" style="margin-top: 0px;">
							<li class="mui-table-view-cell" style="left: 0px;padding: 11px 4px;">
								<span class="mui-icon mui-icon-location"></span>
								<span id="city">承德</span>
								<span class="mui-icon mui-icon-arrowdown"></span>
								<div class="mui-input-row mui-search" style="width: 73%; float: right;">
									<input type="search" class="mui-input-clear" placeholder="请输入收货地址" style="margin-bottom: 0px; width: 100%;float: right; height: 25px;">
								</div>
							</li>
					</ul>
					<ul class="mui-table-view">
							<li class="mui-table-view-cell" style="left: 2px;padding: 11px 4px;">
								花样年华7号楼
								<p style="float: right; font-size: 13px; color: #EC971F;">重新定位</p>
							</li>
					</ul>
					<ul class="mui-table-view">
						<li class="mui-table-view-cell" style="padding-left: 0px;left: 0px;">
							<p style="margin-bottom: 11px;"><span class="mui-icon mui-icon-location"></span>附近地址</p>
							<p style="font-size: 17px; color: #000000;padding-left: 36px;">花样年华1号楼</p>
						</li>
						<li class="mui-table-view-cell">花样年华2号楼</li>
						<li class="mui-table-view-cell">花样年华3号楼</li>
						<li class="mui-table-view-cell">河北民族师范学院</li>
						<li class="mui-table-view-cell">花样年华4号楼</li>
						<li class="mui-table-view-cell">花样年华5号楼</li>
						<li class="mui-table-view-cell">花样年华6号楼</li>
						<li class="mui-table-view-cell">花样年华7号楼</li>
						<li class="mui-table-view-cell">花样年华8号楼</li>
						<li class="mui-table-view-cell">花样年华9号楼</li>
						<li class="mui-table-view-cell">花样年华10号楼</li>
						<li class="mui-table-view-cell">花样年华11号楼</li>
						<li class="mui-table-view-cell">花样年华11号楼</li>
						<li class="mui-table-view-cell">花样年华11号楼</li>
						<li class="mui-table-view-cell">花样年华11号楼</li>
						<li class="mui-table-view-cell">花样年华11号楼</li>
						<li class="mui-table-view-cell">花样年华11号楼</li>
						<li class="mui-table-view-cell">花样年华11号楼</li>
						<li class="mui-table-view-cell">花样年华16号楼</li>
					</ul>
				
		</div>
		<script type="text/javascript">
			document.getElementById("addLoc").addEventListener("tap",function(){
				mui.openWindow({
					url:'addLocation.html',
					id:'addLocation.html',
					styles:{
						top:"25px",//子页面顶部位置
						bottom:"0px"
					},
					show:{
						autoShow:true,
						aniShow:"slide-in-right",
						duration:200
					}
				})
			});
			document.getElementById("city").addEventListener("tap",function(){
				mui.openWindow({
					url:'city.html',
					id:'city.html',
					styles:{
						top:"25px",//子页面顶部位置
						bottom:"0px"
					},
					show:{
						autoShow:true,
						aniShow:"slide-in-bottom",
						duration:200
					}
				})
			});
		</script>
	</body>
</html>
